<template>
  <div class="article-page">
   <nav class="top">
     <div class="logo">
      <img src="../assets/icon/logo.svg" alt="">
    </div>
    <van-icon name="search" size="25" class="search" @click="handleSearch"/>
   </nav>
    <van-tabs v-model="active" class="tabs">
      <van-tab  v-for="item in channel" :key="item.id" :title="item.name">
        <article-item v-for="item in list" :key="item.id" :item="item"></article-item>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getArticles } from '@/api/article'
import { getUser } from '@/api/user'
export default {
  name: 'article-page',
  data () {
    return {
      active: 0,
      channel_id: 0,
      timestamp: 1680856252672,
      list: [],
      channel: []
    }
  },
  async created () {
    const data = await getUser(this.$route.obj)
    this.channel = data.data.channels
    const res = await getArticles({
      channel_id: this.channel_id,
      timestamp: this.timestamp
    })
    this.list = res.data.results
  },
  methods: {
    handleSearch () {
      this.$router.push('/search')
    }
  }
}
</script>

<style lang="less" scoped>
.top{
  position: fixed;
  width: 100%;
  height: 44px;
  z-index: 999;
  background-color: #fff;
  .logo{
    margin-left: 14px;
    height: 44px;
    width: 109px;
  }
  .search{
    top: -40px;
    right: -330px;
  }
}
.tabs {
  top: 50px;
  width: 100%;
}
</style>
